{{ define "host.html" }}

<script src="/fs/public/js/host-scan.js"></script>
<script src="/fs/public/js/host.js"></script>
<script src="/fs/public/js/hist-html.js"></script>
<body>
  <div class="container-lg">
    <div class="row">
      <div class="col-md mt-4 mb-4">
        <div class="card border-primary">
          <div class="card-header">Host</div>
          <div class="card-body table-responsive">
            <table class="table table-borderless">
              <tr>
                <td>ID</td>
                <td>{{ .Host.ID }}</td>
              </tr>
              <tr>
                <td>Name</td>
                <td>{{ .Host.Name }}</td>
              </tr>
              <tr>
                <td>DNS name</td>
                <td>{{ .Host.DNS }}</td>
              </tr>
              <tr>
                <td>Iface</td>
                <td>{{ .Host.Iface }}</td>
              </tr>
              <tr>
                <td>IP</td>
                <td><a href="http://{{ .Host.IP }}" target="_blank">{{ .Host.IP }}</a></td>
              </tr>
              <tr>
                <td>MAC</td>
                <td>{{ .Host.Mac }}</td>
              </tr>
              <tr>
                <td>Hardware</td>
                <td>{{ .Host.Hw }}</td>
              </tr>
              <tr>
                <td>Date</td>
                <td>{{ .Host.Date }}</td>
              </tr>
              <tr>
                <td>Known</td>
                <td>{{ if eq .Host.Known 1 }}Yes{{ else }}No{{ end }}</td>
              </tr>
              <tr>
                <td>Online</td>
                <td>{{ if eq .Host.Now 0 }}
                  <i class="bi bi-circle-fill" style="color:var(--bs-gray-500);"></i>
                  {{ else }}
                  <i class="bi bi-check-circle-fill" style="color:var(--bs-success);"></i>
                  {{ end }}
                </td>
              </tr>
              <tr>
                <td>
                    <button onclick="delHost('{{ .Host.ID }}')" class="btn btn-danger">Delete host</button>
                </td>
                <td></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
        
      <div class="col-md mt-4 mb-4">
        <div class="card border-primary">
          <div class="card-header">Port scan</div>
          <div class="card-body">
            <form class="input-group">
              <input id="begin" type="text" class="form-control" placeholder="1">
              <input id="end" type="text" class="form-control" placeholder="65535">
              <!-- To get from JS -->
              <input type="hidden" id="hostIP" value="{{ .Host.IP }}"> 
              <button onclick="scanAddr()" type="button" class="btn btn-primary">Scan</button>
            </form>
            <div style="display: flex; justify-content: space-between; visibility: hidden;" id="stopBtn" class="mt-2">
              <button onclick="stopScan()" type="button" class="btn btn-warning">Stop</button>
              <div id="curPort"></div>
            </div>
            <div id="foundPorts" class="mt-2">
              <!-- JS here -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md mb-4">
        <div class="card border-primary">
          <div class="card-header">
            <div class="input-group">
              <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Show</button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" onclick="showHist(500)">500</a></li>
                  <li><a class="dropdown-item" onclick="showHist(1000)">1000</a></li>
                  <li><a class="dropdown-item" onclick="showHist(2000)">2000</a></li>
                  <li><a class="dropdown-item" onclick="showHist(5000)">5000</a></li>
                  <li><a class="dropdown-item" onclick="showHist(0)">All</a></li>
                </ul>
              <input class="form-control" id="man-show" onchange="manualShow()" placeholder="Show elements" style="max-width: 10em;">
            </div>
          </div>
          <div class="card-body">
            <div id="showHist"></div>
          </div>
        </div>
      </div>
    </div>
  </div>      
  <script>
    loadHistory('{{ .Host.Mac }}');
  </script>

{{ template "footer.html" }}
{{ end }}
